<template>
  <HerinContainer class="MainCoal-box" :delay="1" :title="Personnelmonitoringdata.name">
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">

      <div class="nav-card-wrap">
        <div
          v-for="(nav, i) in navCardList"
          :key="i"
          class="nav-item"
        >
          <div class="title-row">
            <img :src="nav.navIcon">
            <span>{{ nav.navTitle }}</span>
          </div>
          <div>
            <span v-show = "i == 1">
              <span style="color: #00FDFF;" class="num">{{ nav.num1 | numFormat }}</span>
              <span class="unit-text" style="margin-right:0.3125rem">刀</span>
            </span>
            <span style="color: #00FDFF;" class="num">{{ nav.num | numFormat }}</span>
            <span class="unit-text">{{ nav.unit }}</span>
          </div>
        </div>
      </div>

      <div class="content-item-box">
        <div class="content-item" style="padding-bottom: 0 ;">
          <div class="top-left">
            <span class="top-left-span">月度推进</span>
            <div>
              <span class="top-right-num-v2">{{Personnelmonitoringdata.yuedutuijin}}</span>
              <span class="company" style="margin-right:2.5rem;">米</span>
            </div>
          </div>
          <div class="top-left">
            <span class="top-left-span">年度推进</span>
            <div>
              <span class="top-right-num-v2">{{Personnelmonitoringdata.niandutuijin}}</span>
              <span class="company">米</span>
            </div>
          </div>
        </div>
        <div class="content-item" style="padding-top: 0.625rem;">
          <span class="company">{{routeId}}综采面设计巷道宽度为{{Personnelmonitoringdata.length}}米</span>
        </div>
      </div>

      <!-- 图表分析 -->
      <div class="anaiyse-person">
        <div class="anaiyse-person1">
          <div>
            <div v-if='index'>近30天原煤产量统计</div>
            <div v-else>近7天原煤产量统计</div>
          </div>
          <div class="buttonbox">
            <div
              v-for="(itema,index) in tabList"
              :key="index"
              :class="{'active':activeIndex === index}"
              style="cursor:pointer"
              @click="changeView(index)">{{itema}}</div>
            </div>
          </div>
          <div class="anaiyse-chert">
            <component :is="currentView"></component>
          </div>
      </div>
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import navCard from '../common/navCard.vue';
import Da from '../common/carLine.vue';
import Daa from '../common/barChart.vue';
import { Personnelmonitoring } from '../common/titles';

export default {
  components: {
    HerinContainer,
    navCard,
    Da,
    Daa
  },
  data() {
    return {
      activeIndex: 0,
      index: 0,
      tabList: ['近7天', '近30天'],
      arr: ['Daa', 'Da'],
      chartOption: {
        color: ['#00F9FC'],
        area: false,
        unit: '米'
      },
      Personnelmonitoring: {}
    };
  },
  computed: {
    routeId() {
      return this.$route.params.id;
    },
    Personnelmonitoringdata() {
      return this.Personnelmonitoring[this.routeId] || {};
    },
    currentView() {
      return this.arr[this.index];
    },
    navCardList() {
      const todayOutput = this.Personnelmonitoringdata?.chanliang;
      const monthOutput = this.Personnelmonitoringdata?.zhijia;
      const daoshu = this.Personnelmonitoringdata?.daoshu;
      return [
        { navTitle: '今日产量', num: todayOutput, num1: daoshu, navIcon: require('@/assets/img/dispath/chanliang.png'), unit: '吨' },
        { navTitle: '今日刀数', num: monthOutput, num1: daoshu, navIcon: require('@/assets/img/dispath/daoshu.png'), unit: '架' }
      ];
    }
  },
  mounted() {
    this.Personnelmonitoring = Personnelmonitoring;
  },
  methods: {
    changeView(index) {
      this.activeIndex = index;
      this.index = index;
    }
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  margin-bottom: .625rem;
  &-content{
    .company{
      color: #838383;
      font-size: .75rem;
    }
    .nav-card-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: .625rem;
      width: 100%;

      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 4.375rem;
        width: 9.6875rem;
        padding: 0.5rem 0;

        border-radius: 0.25rem;
        font-size: $commonContentText;
        color: $light3Grey;

        background-color: rgba(255, 255, 255, 0.1);

        .title-row {
          display: flex;
          align-items: center;

          img {
            margin-right: 0.3125rem;
            width: 0.875rem;
            height: 0.875rem;
          }
        }

        .num {
          font-size: $smallHeadingsText;
        }
      }
    }
    .content-item-box{
      margin-bottom: .625rem;
      border-radius: .25rem;
      background-color: rgba(255, 255, 255, 0.1);
      .content-item{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .9375rem;
        box-sizing: border-box;
        .top-left{
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 50%;
        }
        .top-left-span{
          font-size: .875rem;
          color: #F8F8F8;
          vertical-align:middle;
        }
        .top-right-num-v2{
          color: #00FDFF;
          font-size: 1rem;
          font-weight: 700;
          margin-right: .625rem;
        }
      }
    }
    .anaiyse-person{
      .anaiyse-person1{
        display: flex;
        justify-content: space-between;
        margin: 0.625rem 0;
        font-size: .75rem;
        color: #ADADAD;
      }
      .buttonbox{
        display: flex;
        align-items: center;
        div{
          font-size: .75rem;
          color: rgba(255, 255, 255, 100);
          margin:0 .3125rem;
          width: 3rem;
          text-align: center;
          height: 1.125rem;
          line-height: 1.125rem;
          background: rgba(232, 232, 232, 0.2);
        }
        .active{
          color: #02E4FF;
          background-color: rgba(2, 228, 255, 0.2);
        }
      }
    }
  }
}
</style>
